<?php defined('IN_YuLin') || exit('NO PERMIT!'); ?>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片上传</title>
		<script src="static/js/jquery.min.js"></script>
		<style>
            *{ margin: 0; padding: 0;}
			#uploader-demo{ padding: 20px; font-family:"微软雅黑"}
			.uploader-preview{ width:400px; height:290px; border:1px solid #eee; margin:0 auto 38px; text-align: center; background:url(static/images/upload-preview.png) center center no-repeat;}
			.webuploader-container { position: relative; display: inline-block;}
			.uploader-button{ text-align: center;}
			.webuploader-element-invisible {
				position: absolute !important;
				clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
				clip: rect(1px,1px,1px,1px);
			}
			.webuploader-pick,.webuploader-ok {
				position: relative;
				display: inline-block;
				cursor: pointer;
				background: #00b7ee;
				padding: 10px 15px;
				color: #fff;
				text-align: center;
				border-radius: 3px;
				overflow: hidden;
			}
			.webuploader-pick-hover {
				background: #00a2d4;
			}
			
			.webuploader-pick-disable {
				opacity: 0.6;
				pointer-events:none;
			}
		</style>
	</head>
	
	<body>
	
		<!--dom结构部分-->
		<div id="uploader-demo">
			<!--用来存放item-->
			<div id="uploader-preview" class="uploader-preview"></div>
			
			<div class="uploader-button">
				<div id="filePicker">选择图片</div>
				<div class="webuploader-ok" id="uploader-ok" style="margin-left:10px;">确定上传</div>
			</div>
		</div>
		
		<script type="text/javascript" src="static/js/webuploader/webuploader.min.js"></script>
		<script>
			var $list = $('#uploader-preview');   //  预览区
			var $button = $('#uploader-ok');    //  确认上传按钮
			var thumbnailWidth = 400;
			var thumbnailHeight = 290;
			var $urlvalue = $("#{$id}",parent.document);
			var $topdialog = parent.layer;
			
			// 初始化Web Uploader
			var uploader = WebUploader.create({

				// 选完文件后，是否自动上传。
				auto: false,

				// swf文件路径
				swf: 'static/js/webuploader/Uploader.swf',

				// 文件接收服务端。
				server: '{U("api/upload/image")}',

				// 选择文件的按钮。可选。
				// 内部根据当前运行是创建，可能是input元素，也可能是flash.
				pick: '#filePicker',
				
				//	拖动
				dnd: '#uploader-preview',

				// 只允许选择图片文件。
				accept: {
					title: 'Images',
					extensions: 'gif,jpg,jpeg,png',
					mimeTypes: 'image/*'
				}
			});
			
			// 当有文件添加进来的时候
			uploader.on( 'fileQueued', function( file ){
				var $li = $('<div class="preview-inner" id="' + file.id + '"><img></div>');
				var $img = $li.find('img');

				// $list为容器jQuery实例
				$list.append( $li );

				// 创建缩略图
				// 如果为非图片文件，可以不用调用此方法。
				// thumbnailWidth x thumbnailHeight 为 100 x 100
				uploader.makeThumb( file, function( error, src ) {
					if ( error ) {
						$img.replaceWith('<span>不能预览</span>');
						return;
					}

					$img.attr( 'src', src );
				}, thumbnailWidth, thumbnailHeight );
			});
			
			// 文件上传过程中创建进度条实时显示。
			uploader.on( 'uploadProgress', function( file, percentage ) {
				var $li = $( '#'+file.id ),
					$percent = $li.find('.progress span');

				// 避免重复创建
				if ( !$percent.length ) {
					$percent = $('<p class="progress"><span></span></p>').appendTo( $li ).find('span');
				}

				$percent.css( 'width', percentage * 100 + '%' );
			});

			// 文件上传成功，给item添加成功class, 用样式标记上传成功。
			uploader.on( 'uploadSuccess', function( file, res ) {
				var r = $.parseJSON(res._raw);
				$urlvalue.val(r.url);
				$topdialog.closeAll();
				//$( '#'+file.id ).addClass('upload-state-done');
			});

			// 文件上传失败，显示上传出错。
			uploader.on( 'uploadError', function( file ) {
				var $li = $( '#'+file.id ),
					$error = $li.find('div.error');

				// 避免重复创建
				if ( !$error.length ) {
					$error = $('<div class="error"></div>').appendTo( $li );
				}

				$error.text('上传失败');
			});

			// 完成上传完了，成功或者失败，先删除进度条。
			uploader.on( 'uploadComplete', function( file ) {
				$( '#'+file.id ).find('.progress').remove();
			});
			
			//  确认上传
			$button.on('click', function() {
				uploader.upload();
			});
		</script>

	</body>
</html>